<template>
    <div>
        <Card>
            <Row class="form-row">
                <Form :model="filters" ref="form1" label-position="right" :label-width="90" inline>
                    <FormItem label="小区名称" prop="name">
                        <div class="filters-input">
                            <el-select v-model="filters.housingId" filterable default-first-option placeholder="请选择小区"
                                       :clearable="true" @change="housechange" no-data-text="暂无数据">
                                <el-option v-for="item in houseList" :key="item.id" :label="item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="组团" prop="groupName">
                        <div class="filters-input">
                            <el-select v-model="filters.groupName" filterable default-first-option placeholder="请选择组团"
                                       :clearable="true" no-data-text="暂无数据" @change="filtergroupNamechange">
                                <el-option v-for="item in filtergroupList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="楼栋" prop="building">
                        <div class="filters-input">
                            <el-select v-model="filters.building" filterable default-first-option placeholder="请选择楼栋"
                                       :clearable="true" no-data-text="暂无数据" @change="filterbuildingchange">
                                <el-option v-for="item in filterbuildList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="单元" prop="unit">
                        <div class="filters-input">
                            <el-select v-model="filters.unit" filterable default-first-option placeholder="请选择单元"
                                       :clearable="true" no-data-text="暂无数据" @change="filterunitchange">
                                <el-option v-for="item in filterunitList" :key="item.label" :label="item.label"
                                           :value="item.label">
                                </el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem label="房间号" prop="room">
                        <div class="filters-input">
                            <el-select v-model="filters_room" no-data-text="暂无数据" filterable
                                       :clearable="true" placeholder="请选择房间号">
                                <el-option v-for="item in filterroomList" :key="item.label" :label="item.label"
                                           :value="item.label"></el-option>
                            </el-select>
                        </div>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="ios-search" @click="handleQuery('form1')">
                            搜索
                        </Button>
                    </FormItem>
                </Form>
            </Row>
            <Row class="form-row">
                <Button type="primary" icon="md-add" @click="handleAdd()" style="margin-right: 10px;">新增</Button>
                <Button type="primary" icon="md-trash" @click="batchDelete()" style="margin-right: 10px;">批量删除</Button>
                <Tooltip content="请先下载模板">
                    <Button type="warning" icon="ios-undo" @click="fileIn" style="margin-right: 10px;">批量导入</Button>
                </Tooltip>
                <Button type="warning" icon="md-share-alt" @click="exportExcel" style="margin-right: 10px;">导出为Excel文件
                </Button>
                <Tooltip content="这是批量导入的模板">
                    <Button type="info" icon="md-download" @click="downLoad" style="margin-right: 10px;">下载模板
                    </Button>
                </Tooltip>
            </Row>


            <el-table stripe border :loading="tableLoading" :data="tableData" ref="table" style="width: 100%">
                <template slot="empty">暂无数据</template>
                <el-table-column prop="houseName" label="小区名称"></el-table-column>
                <el-table-column prop="groupName" label="组团"></el-table-column>
                <el-table-column prop="building" label="楼栋"></el-table-column>
                <el-table-column prop="unit" label="单元"></el-table-column>
                <el-table-column prop="room" label="房间"></el-table-column>
                <el-table-column prop="architectureArea" label="建筑面积"></el-table-column>
                <el-table-column prop="insideArea" label="套内面积"></el-table-column>
                <el-table-column prop="publicArea" label="公摊面积"></el-table-column>
                <el-table-column prop="status" :formatter="formatterState" label="房屋状态"></el-table-column>
                <el-table-column label="操作" width="150" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handleAdd(scope.row.id)">修改</el-button>
                        <el-button size="mini" type="danger" @click="rowDelete(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>


            <Page style="margin: 10px 0;" :total="pageTotal" :current="pageNum" :page-size="pageSize" show-total
                  show-sizer show-elevator @on-change="handlePage" @on-page-size-change='handlePageSize'>
            </Page>
        </Card>

        <Modal v-model="modal1" title="批量导入" class="modal-content" :mask-closable="false">
            <Form :model="filemodal" :rules="rule" ref="fileform" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <FormItem label="小区" prop="housename">
                    <Select v-model="filemodal.housename" clearable placeholder="请选择小区" style="width:100%" filterable
                            :clearable="true" ref="fileselect">
                        <Option v-for="item in filehouseList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="上传文件">
                    <el-upload class="upload-demo" :data="data1" ref="upload" :action="act" :on-preview="handlePreview"
                               :on-remove="handleRemove" :file-list="fileList" :auto-upload="false"
                               accept=".xlsx,.xls,.csv" :headers="{'x-access-token':token}" :on-success="filesuccess"
                               :on-error="filefail" :limit="1" :multiple="false">
                        <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                        <!-- <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传文件</el-button> -->
                        <div slot="tip" class="el-upload__tip">只能上传.xlsx/.xls/.csv文件</div>
                    </el-upload>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="submitUpload" :loading="formLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="batchDelModal" title="批量删除" class="modal-content" :mask-closable="false">
            <Form :model="batch" ref="batchForm" label-position="right" :label-width="140" inline>
                <FormItem label="小区" prop="housingId">
                    <el-select v-model="modal.housingId" filterable default-first-option placeholder="请选择小区"
                               :clearable="true"
                               style="width:100%" no-data-text="暂无数据" @change="modalhousechange">
                        <el-option v-for="item in modalhouseList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="组团" prop="groupName">
                    <!-- <Button type="primary" size="large">添加组团</Button> -->
                    <el-select v-model="modal_groupName" filterable allow-create default-first-option
                               placeholder="请选择组团" style="width:100%" no-data-text="暂无数据" :clearable="true"
                               @change="modalgroupNamechange">
                        <el-option v-for="item in groupList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="楼栋" prop="building">
                    <el-select v-model="modal_building" filterable allow-create default-first-option placeholder="请选择楼栋"
                               :clearable="true"
                               no-data-text="暂无数据" style="width:100%" @change="modalbuildingchange">
                        <el-option v-for="item in buildingList" :key="item.label" :label="item.label"
                                   :value="item.label">
                        </el-option>
                    </el-select>
                    <!-- <Button type="primary" size="large">添加楼栋</Button> -->
                </FormItem>
                <FormItem label="单元" prop="unit">
                    <el-select v-model="modal_unit" filterable allow-create default-first-option placeholder="请选择单元"
                               :clearable="true"
                               no-data-text="暂无数据" style="width:100%" @change="modalunitchange">
                        <el-option v-for="item in unitList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="batchDel" :loading="formLoading">确定</Button>
            </div>
        </Modal>


        <Modal v-model="modal2" title="导出文件" class="modal-content" :mask-closable="false">
            <Form :model="fileoutmodal" :rules="rule" ref="fileoutform" label-position="right" :label-width="100"
                  class="myOpenFrom">
                <FormItem label="小区" prop="housename">
                    <Select v-model="fileoutmodal.housename" placeholder="请选择小区" style="width:100%" filterable
                            :clearable="true" ref="outselect">
                        <Option v-for="item in houseList" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" @click="onCancel">取消</Button>
                <Button type="primary" @click="fileoutSubmit" :loading="formLoading">确定导出</Button>
            </div>
        </Modal>

        <Modal v-model="formVisible" :title="modal && modal.id ? '修改' : '新增'" class="modal-content" width="900"
               :mask-closable="false">
            <Form :model="modal" :rules="rule" ref="form2" label-position="right" :label-width="110" class="myOpenFrom">
                <!-- <FormItem label="上级机构">
                  <treeselect :options="optionsParent" :default-expand-level="1" @select="selectOne" noChildrenText="没有子节点" noOptionsText="暂无选项" noResultsText="没有发现结果" :value="value" placeholder="选择上级机构" v-model="modal.deptId" :disabled="modal&&modal.id?true:false" />
                </FormItem> -->
                <FormItem label="小区" prop="housingId">
                    <el-select v-model="modal.housingId" filterable default-first-option placeholder="请选择小区"
                               :clearable="true"
                               style="width:100%" no-data-text="暂无数据" @change="modalhousechange">
                        <el-option v-for="item in modalhouseList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="组团" prop="groupName">
                    <!-- <Button type="primary" size="large">添加组团</Button> -->
                    <el-select v-model="modal_groupName" filterable allow-create default-first-option
                               placeholder="请选择组团" style="width:100%" no-data-text="暂无数据"
                               @change="modalgroupNamechange" :clearable="true">
                        <el-option v-for="item in groupList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="楼栋" prop="building">
                    <el-select v-model="modal_building" filterable allow-create default-first-option placeholder="请选择楼栋"
                               :clearable="true"
                               no-data-text="暂无数据" style="width:100%" @change="modalbuildingchange">
                        <el-option v-for="item in buildingList" :key="item.label" :label="item.label"
                                   :value="item.label">
                        </el-option>
                    </el-select>
                    <!-- <Button type="primary" size="large">添加楼栋</Button> -->
                </FormItem>
                <FormItem label="单元" prop="unit">
                    <el-select v-model="modal_unit" filterable allow-create default-first-option placeholder="请选择单元"
                               :clearable="true"
                               no-data-text="暂无数据" style="width:100%" @change="modalunitchange">
                        <el-option v-for="item in unitList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>

                <FormItem label="房间号" prop="room">
                    <Input v-model="modal.room" placeholder="房间号"></Input>
                </FormItem>
                <FormItem label="建筑面积" prop="architectureArea">
                    <Input v-model="modal.architectureArea" placeholder="建筑面积"></Input>
                </FormItem>
                <FormItem label="套内面积" prop="insideArea">
                    <Input v-model="modal.insideArea" placeholder="套内面积"></Input>
                </FormItem>
                <FormItem label="公摊面积" prop="publicArea">
                    <Input v-model="modal.publicArea" placeholder="公摊面积"></Input>
                </FormItem>
                <FormItem label="房屋状态" prop="status">
                    <RadioGroup v-model="modal.status">
                        <Radio label="1">入住</Radio>
                        <Radio label="2">未装修</Radio>
                        <Radio label="3">出租</Radio>
                        <Radio label="4">空置</Radio>
                    </RadioGroup>
                </FormItem>
                <!-- <FormItem label="关联小区" :hidden="this.typeInt==1 ? true : false">
                  <treeselect :multiple="true" :default-expand-level="2" :options="options" noChildrenText="没有子节点" noOptionsText="暂无选项" noResultsText="没有发现结果" @open="selectDepart()" :value="value" :show-count="true" valueConsistsOf="LEAF_PRIORITY" placeholder="选择小区" v-model="modal.houseList" />
                </FormItem> -->
                <!-- <FormItem label="小区" :hidden="houseshow==1 ? true : false" >
                    <Select v-model="modal.houseList" placeholder="请选择小区" style="width:100%" multiple>
                        <Option v-for="item in houseL" :value="item.id" :key="item.id">{{ item.name }}</Option>
                    </Select>
                </FormItem> -->
            </Form>

            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="handleSubmit" :loading="formLoading">确定</Button>
            </div>

        </Modal>

        <Modal v-model="formUploadVisible" title="批量同步" class="modal-content" width="900" :mask-closable="false">
            <Form :model="modalUpload" :rules="rule" ref="roomUploadform" label-position="right" :label-width="110"
                  class="myOpenFrom">
                <FormItem label="小区" prop="housingId">
                    <el-select v-model="modalUpload.housingId" filterable default-first-option placeholder="请选择小区"
                               :clearable="true"
                               style="width:100%" no-data-text="暂无数据" @change="modalhousechange">
                        <el-option v-for="item in modalhouseList" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="组团" prop="groupName">
                    <el-select v-model="modal_groupName" filterable allow-create default-first-option
                               placeholder="请选择组团" style="width:100%" no-data-text="暂无数据" :clearable="true"
                               @change="modalgroupNamechange">
                        <el-option v-for="item in groupList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="楼栋" prop="building">
                    <el-select v-model="modal_building" filterable allow-create default-first-option placeholder="请选择楼栋"
                               :clearable="true"
                               no-data-text="暂无数据" style="width:100%" @change="modalbuildingchange">
                        <el-option v-for="item in buildingList" :key="item.label" :label="item.label"
                                   :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
                <FormItem label="单元" prop="unit">
                    <el-select v-model="modal_unit" filterable allow-create default-first-option placeholder="请选择单元"
                               :clearable="true"
                               no-data-text="暂无数据" style="width:100%" @change="modalunitchange">
                        <el-option v-for="item in unitList" :key="item.label" :label="item.label" :value="item.label">
                        </el-option>
                    </el-select>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="text" size="large" @click="onCancel">取消</Button>
                <Button type="primary" size="large" @click="roomUploadSubmit" :loading="formLoading">确定</Button>
            </div>

        </Modal>

        <Modal v-model="loadMode" title="导入房间" width="450" class="modal-content" :mask-closable="false">
            <div class="moneybox tips">
                <Icon type="ios-information-circle-outline" color="red" size="16px"/>
                <span>关闭弹窗不影响导入操作</span>
            </div>
            <div class="info" v-loading="loadingInfo"></div>
            <p class="p-info">正在导入{{msgInfo.housingName||'--'}}账单（{{msgInfo.son ||'--'}}/{{msgInfo.total
                ||'--'}}），请稍等...</p>
            <div slot="footer">
                <Button type="primary" @click="btnSure">确定</Button>
            </div>
        </Modal>
    </div>
</template>


<script>
    import baseURL from '_conf/url'
    import Treeselect from "@riophae/vue-treeselect";
    import Cookies from 'js-cookie'
    import {TOKEN_KEY} from '@/libs/util'

    const token = Cookies.get(TOKEN_KEY)
    const act = baseURL + "/api/room/upload"
    //校验规则
    const rules = {
        parentId: [
            {
                required: true,
                message: "请选择物业",
                trigger: "blur"
            }
        ],
        address: [{
            required: true,
            message: "请输入小区地址",
            transfer: "blur"
        }],
        groupName: [{
            message: "请选择组团",
            trigger: "change"
        }],
        housingId: [{
            required: true,
            message: "请选择小区"
        }],
        housename: [{
            required: true,
            message: "请选择小区"
        }],
        id: [{
            required: true,
            message: "必填",
        }],
        building: [{
            message: "请选择楼栋",
            trigger: "change"
        }],
        unit: [{
            message: "请选择单元",
            trigger: "change"
        }],
        room: [{
            required: true,
            message: "请输入房间号",
            trigger: "blur"
        }],
        status: [{
            required: true,
            message: "请选择房屋状态",
            trigger: "blur"
        }],
    };

    //加载数据
    let loadData = function () {
        if (this.tableLoading) return;
        this.tableLoading = true;
        let params = this.filters;
        params.room = this.filters_room;
        params.pageNum = this.pageNum;
        params.pageSize = this.pageSize;
        params.room = this.filters.room;
        if (this.filters.value3) {
            console.log(this.filters.value3[0])
            params.id = this.filters.value3[0];
        }
        console.log(params);
        //与后台交换数据
        this.postRequest("/api/room/loadData", params).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.tableData = res.data.list;
                this.pageTotal = res.data.total;
            } else {
                this.tableData = [];
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //查询
    let handleQuery = function (name) {
        this.filters.pageNum = 1;
        this.$refs[name].validate(valid => {
            if (valid) {
                this.loadData();
            }
        });
    };

    //删除
    let handleDelete = function (id) {
        this.getRequest("/api/room/delRoom?id=" + id).then(res => {
            this.tableLoading = false;
            if (res.code == 20000) {
                this.$Message.success({
                    content: "删除成功",
                    duration: 5
                });
                this.pageNum = 1;
                this.loadData();
            } else {
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    let printAdd = function (printId, id, name) {
        let url = "/printinfo/openModel";
        if (printId) {
            url = "/printinfo/openModel?id=" + printId;
        }
        this.modal.housingId = id;
        this.name = name + "-打印机";
        this.getRequest(url).then(res => {
            if (res) {
                this.modal = {};
                this.modal = res;
            }
            this.tableLoading = false;
            this.formPrintVisible = true;
        });
    };
    let alipayToken = function (id) {
        this.$Message.success("这是支付宝token");
    };
    //打开页面
    let handleAdd = function (id) {
        let url = "/api/room/openModel";
        this.modal = {};
        if (id) {
            url = "/api/room/openModel?id=" + id;
            this.getRequest(url).then(res => {
                console.log(res)
                this.tableLoading = false;
                if (res.code == 20000) {
                    this.gethouse();
                    res.data.status = String(res.data.status);
                    this.modal = res.data;
                    this.modal.housename = res.data.id;
                    this.modal_unit = res.data.unit;
                    this.modal_building = res.data.building;
                    this.modal_groupName = res.data.groupName;
                    this.formVisible = true;
                } else {
                    this.$Message.error({
                        content: res.message,
                        duration: 5
                    });
                }
            });
        } else {
            this.formVisible = true;
        }
    };


    //保存
    let save = function () {
        console.log(this.modal);
        this.modal.unit = this.modal_unit;
        this.modal.building = this.modal_building;
        this.modal.groupName = this.modal_groupName;
        this.postRequest("/api/room/saveOrUpdate", this.modal).then(res => {
            this.tableLoading = false;
            console.log(res)
            if (res.code == 20000) {
                this.formLoading = false;
                this.formVisible = false;
                this.$Message.success({
                    content: "保存成功！",
                    duration: 5
                });
                this.onCancel();
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //打开批量删除模态框
    let batchDelete = function () {
        this.modal = {};
        this.batchDelModal = true;
    };
    //批量删除
    let batchDel = function () {
        console.log(this.modal);
        this.modal.unit = this.modal_unit;
        this.modal.building = this.modal_building;
        this.modal.groupName = this.modal_groupName;
        this.postRequest("/api/room/batchDelete", this.modal).then(res => {
            this.tableLoading = false;
            console.log(res)
            if (res.code == 20000) {
                this.formLoading = false;
                this.batch = false;
                this.$Message.success({
                    content: "已删除！",
                    duration: 5
                });
                this.onCancel();
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //打开批量同步页面
    let roomUpload = function () {
        this.modalUpload = {};
        this.$refs["roomUploadform"].resetFields();
        this.modal_unit = null;
        this.modal_groupName = null;
        this.modal_building = null;
        this.formUploadVisible = true;
    }
    //批量同步确定按钮
    let roomUploadSubmit = function () {
        this.$refs["roomUploadform"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.saveRoomUpload();
            }
        });
    }
    let saveRoomUpload = function () {
        let parms = this.modalUpload;
        parms.groupName = this.modal_groupName;
        parms.building = this.modal_building;
        parms.unit = this.modal_unit;
        this.postRequest("/api/room/roomInfoUpload", parms).then(res => {
            this.tableLoading = false;
            console.log(res)
            if (res.code == 20000) {
                this.formLoading = false;
                this.$Message.success({
                    content: "同步成功！",
                    duration: 5
                });
                this.onCancel();
                this.loadData();
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        })
    }

    //保存
    let savePrint = function () {
        this.postRequest("/api/printinfo/saveOrUpdate", this.modal).then(res => {
            this.tableLoading = false;
            if (res == true) {
                this.formLoading = false;
                this.formPrintVisible = false;
                this.loadData();
                this.$Message.success("保存成功！");
            } else {
                this.formLoading = false;
                this.$Message.error({
                    content: res.message,
                    duration: 5
                });
            }
        });
    };
    //保存
    let handleSubmit = function () {
        this.$refs["form2"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.save();
            }
        });
    };
    let handlePrintSubmit = function () {
        this.$refs["form3"].validate(valid => {
            if (valid) {
                this.formLoading = true;
                this.formPrintVisible = false;
                this.savePrint();
            }
        });
    };
    //文件导出
    let fileoutSubmit = function () {
        window.location.href = baseURL + "/common/getRoomExcel?housingId=" + this.fileoutmodal.housename;
        this.formLoading = true;
        this.modal2 = false;
        this.$refs["fileoutform"].resetFields();

    }

    //小区变化
    let housechange = function (value) {
        console.log("选中了" + value);
        if (value) {
            this.filtergroupList = [];
            this.filterbuildList = [];
            this.filterunitList = [];
            this.filterroomList = [];
            this.filters.groupName = '';
            this.filters.building = '';
            this.filters.unit = '';
            this.filters_room = '';
            this.getRequest("/api/room/queryGroupName?housingId=" + value).then(res => {

                console.log(res)
                if (res.data.groupList != null) {
                    this.filtergroupList = res.data.groupList;
                } else if (res.data.buildList != null) {
                    this.filterbuildList = res.data.buildList;
                } else if (res.data.unitList != null) {
                    this.filterunitList = res.data.unitList;
                } else {
                    this.filterroomList = res.data.roomList;
                }
            });
        }
    }
    //filter里面的
    let filtergroupNamechange = function (value) {
        console.log("选中了" + value);
        if (value) {
            this.filterbuildList = [];
            this.filterunitList = [];
            this.filterroomList = [];
            this.filters.building = '';
            this.filters.unit = '';
            this.filters_room = '';
            this.getRequest("/api/room/queryBuilding?groupName=" + value + "&housingId=" + this.filters.housingId).then(res => {
                console.log(res)
                if (res.data.buildList != null) {
                    this.filterbuildList = res.data.buildList;
                } else if (res.data.unitList != null) {
                    this.filterunitList = res.data.unitList;
                } else {
                    this.filterroomList = res.data.roomList;
                }
            });
        }
    }
    let filterbuildingchange = function (value) {
        console.log("选123中了" + this.filters.groupName);
        if (value) {
            this.filterunitList = [];
            this.filterroomList = [];
            this.filters.unit = '';
            this.filters_room = '';
            this.getRequest("/api/room/queryUnit?building=" + value + "&housingId=" + this.filters.housingId + "&groupName=" + this.filters.groupName).then(res => {

                console.log(res)
                if (res.data.unitList != null) {
                    this.filterunitList = res.data.unitList;
                } else {
                    this.filterroomList = res.data.roomList;
                }
            });
        }
    }

    let filterunitchange = function (value) {
        console.log("选中了" + value);
        if (value) {
            this.filterroomList = [];
            this.filters_room = '';
            this.getRequest("/api/room/queryRoom?unit=" + value + "&housingId=" + this.filters.housingId + "&groupName=" + this.filters.groupName + "&building=" + this.filters.building).then(res => {
                console.log(res)
                this.filterroomList = res.data.roomList;
            });
        }
    }


    let caschange = function (selectedData) {
        console.log("选中了" + selectedData);
    }

    //modal的小区变化
    let modalhousechange = function (value) {
        console.log("选中了" + value);
        if (value) {
            this.modal_building = '';
            this.modal_groupName = '';
            this.modal_unit = '';
            this.groupList = [];//组团
            this.buildingList = [];//楼栋
            this.unitList = [];//单元
            this.getRequest("/api/room/queryGroupName?housingId=" + value).then(res => {

                console.log(res)
                if (res.data.groupList != null) {
                    this.groupList = res.data.groupList;
                } else if (res.data.buildList != null) {
                    this.buildingList = res.data.buildList;
                } else {
                    this.unitList = res.data.unitList;
                }
            });
        }
    }
    //modal的组团变化
    let modalgroupNamechange = function (value) {
        console.log("选中了" + value);
        if (value) {
            this.modal_building = '';
            this.modal_unit = '';
            this.buildingList = [];//楼栋
            this.unitList = [];//单元
            let url = "/api/room/queryBuilding?groupName=" + value + "&housingId=" + this.modal.housingId;
            if (!this.modal.housingId) {
                url = "/api/room/queryBuilding?groupName=" + value + "&housingId=" + this.modalUpload.housingId;
            }
            this.getRequest(url).then(res => {
                console.log(res)
                if (res.data.buildList != null) {
                    this.buildingList = res.data.buildList;
                } else {
                    this.unitList = res.data.unitList;
                }
            });
        } else {
            this.$Message.info("请先选择上一级");
        }
    }
    //modal的楼栋变化
    let modalbuildingchange = function (value) {
        console.log("选中了" + value);
        if (value) {
            this.modal_unit = '';
            this.unitList = [];//单元
            let url = "/api/room/queryUnit?building=" + value + "&housingId=" + this.modal.housingId + "&groupName=" + this.modal_groupName;
            if (!this.modal.housingId) {
                url = "/api/room/queryUnit?building=" + value + "&housingId=" + this.modalUpload.housingId + "&groupName=" + this.modal_groupName
            }
            this.getRequest(url).then(res => {
                console.log(res)
                this.unitList = res.data.unitList;
            });
        } else {
            this.$Message.info("请先选择上一级");
        }
    }

    let modalunitchange = function (value) {
        console.log("选中了" + value);
        console.log("选中" + this.filters.building);
        if (value) {
            this.filterroomList = [];
            this.filters_room = '';
            let url = "/api/room/queryRoom?unit=" + value + "&housingId=" + this.modal.housingId + "&groupName=" + this.modal_groupName + "&building=" + this.modal_building
            if (!this.modal.housingId) {
                url = "/api/room/queryRoom?unit=" + value + "&housingId=" + this.modalUpload.housingId + "&groupName=" + this.modal_groupName + "&building=" + this.modal_building
            }
            this.getRequest(url).then(res => {
                console.log(res)
                this.filterroomList = res.data.roomList;
            });
        }
    }

    let onCancel = function () {
        this.$refs["fileform"].resetFields();
        this.$refs["fileoutform"].resetFields();
        this.$refs["form2"].resetFields();
        this.formPrintVisible = false;
        this.formLoading = false;
        this.formVisible = false;
        this.modal1 = false;
        this.modal2 = false;
        this.batchDelModal = false;
        this.formUploadVisible = false;
        this.groupList = [];//组团
        this.buildingList = [];//楼栋
        this.unitList = [];//单元
        this.modal_unit = '';
        this.modal_groupName = '';
        this.modal_building = '';

        this.$refs.fileselect.clearSingleSelect();
        this.$refs.outselect.clearSingleSelect();
        this.$refs.upload.clearFiles();
    };


    export default {
        name: "userList",
        components: {
            Treeselect
        },
        data() {
            return {
                data1: {},
                fileList: [],
                groupList: [],//组团
                buildingList: [],//楼栋
                unitList: [],//单元
                houseL: null,//小区id
                modal1: false,
                modal2: false,
                batchDelModal: false,
                file: null,
                modal_unit: '',//单元
                modal_groupName: '',//组团
                modal_building: '',//楼栋
                loadingStatus: false,
                housingId: null,
                houseList: [],//小区
                filehouseList: [],
                //filter里面的
                filtergroupList: [],
                filterbuildList: [],
                filterunitList: [],
                filterroomList: [],
                filters_room: '',

                modalhouseList: [],
                name: "",
                deptList: [],
                //查询条件
                filters: {},
                //页码
                pageNum: 1,
                //每页数量
                pageSize: 10,
                //总数
                pageTotal: 0,
                //验证规则
                rule: rules,
                token: token,
                act: act,
                //选择上级机构
                optionsDepart: [],

                //表格数据
                tableData: [],
                //数据表格隐藏那个状态
                tableLoading: false,
                //对话框隐藏状态
                formVisible: false,
                formUploadVisible: false,
                formPrintVisible: false,
                //表单提交状态
                formLoading: false,
                modal: {},
                modalUpload: {},//批量同步
                filemodal: {},//文件导入
                batch: {},//批量删除
                fileoutmodal: {},//文件导出
                casdata: [],
                housedata: [],
                value3: [],
                //    导入房间
                loadMode: false,
                msgInfo: {},
                loadingInfo: false,
                timer: null,
            };
        },
        created: function () {
            this.gethouse();
        },
        methods: {
            formatterState(row, column) {
                if (row.status == 1) {
                    return "入住";
                } else if (row.status == 2) {
                    return "未装修";
                } else if (row.status == 3) {
                    return "出租";
                } else if (row.status == 4) {
                    return "空置";
                }
            },
            //filter里面的
            filterbuildingchange,
            filtergroupNamechange,
            filterunitchange,

            fileoutSubmit,
            modalhousechange,
            caschange,
            modalgroupNamechange,
            modalbuildingchange,
            modalunitchange,
            housechange,
            loadData,
            save,
            batchDel,
            roomUpload,
            roomUploadSubmit,
            saveRoomUpload,
            savePrint,
            handleQuery,
            handleDelete,
            printAdd,
            alipayToken,
            handlePage(value) {
                this.pageNum = value;
                this.loadData();
            },
            handlePageSize(value) {
                this.pageSize = value;
                this.loadData();
            },
            handleAdd,
            batchDelete,
            handleSubmit,
            handlePrintSubmit,
            onCancel,
            //导出表格
            exportExcel() {
                this.modal2 = true;
                // this.$refs.table.exportCsv({
                //     filename: `table-${(new Date()).valueOf()}.csv`
                // })
            },
            handleUpload(file) {
                this.file = file;
                return false;
            },
            upload() {
                this.loadingStatus = true;
                setTimeout(() => {
                    // this.file = null;
                    this.loadingStatus = false;
                    this.$Message.success('Success')
                }, 1500);
            },
            gethouse() {
                let url = "/api/housing/getHousingByLogin";
                this.postRequest(url).then(res => {
                    // console.log(res);
                    this.houseList = res;
                    this.modalhouseList = res;
                    this.filehouseList = res;
                    this.filters.housingId = res[0].id;
                    this.housechange(this.filters.housingId);
                    this.loadData();
                });
            },
            fileIn() {
                this.postRequest("/common/checkImport?lockStatus=room").then(res => {
                    if (res.code == 20000) {
                        this.loadMode = true;
                        this.loadingInfo = true;
                        this.timer = setInterval(() => {
                            this.postRequest("/common/checkImport?lockStatus=room").then(res => {
                                console.log(res);
                                if (res.code == 20000) {
                                    this.msgInfo = res.data;
                                }
                            });
                        }, 2000)
                    } else {
                        this.filemodal = {};
                        this.gethouse();
                        this.modal1 = true;
                    }
                });
            },
            //文件上传
            submitUpload() {
                this.$refs["fileform"].validate(valid => {
                    if (valid) {
                        if (this.file == null) {
                            this.$Message.error("请点击需要上传文件");
                        } else {

                            this.data1.housingId = this.filemodal.housename;

                            this.$refs.upload.submit();
                            //打开loading模态框
                            this.modal1 = false;
                            this.loadingInfo = true;
                            this.loadMode = true;
                            this.timer = setInterval(() => {
                                this.postRequest("/common/checkImport?lockStatus=room").then(res => {
                                    console.log(res);
                                    if (res.code == 20000) {
                                        this.msgInfo = res.data;
                                    }
                                });
                            }, 2000)

                        }
                    }
                });
            },
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                this.file = file;
            },
            filesuccess(response, file) {

                if (response.code == 20000) {
                    clearInterval(this.timer)
                    this.postRequest("/common/clearImport?lockStatus=room").then(res => {
                        this.loadMode = false;
                    });
                    this.$notify.success({
                        title: "我的账单>导入账单",
                        message: response.message,
                        duration: 0
                    });
                    this.loadData();
                } else {
                    clearInterval(this.timer)

                    this.postRequest("/common/clearImport?lockStatus=room").then(res => {
                        this.loadMode = false;
                    });
                    this.$notify.error({
                        title: "我的账单>导入账单",
                        message: response.message,
                        duration: 0
                    });
                }
                this.$refs.upload.clearFiles();
            },
            filefail(response) {
                this.postRequest("/common/clearImport?lockStatus=room").then(res => {
                    this.loadMode = false;
                });
                this.onCancel();
                this.$Modal.error({
                    title: "上传失败",
                    content: "请稍后再试"
                });
                this.$refs.upload.clearFiles();
            },
            //模板下载
            downLoad() {
                let url = "http://oss.siyueluo.com/template/%E6%88%BF%E5%B1%8B%E4%BF%A1%E6%81%AF%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx";
                window.location.href = url;
            },
            //    row-按钮-删除
            rowDelete: function (id) {
                this.getRequest("/api/room/delRoom?id=" + id).then(res => {
                    this.tableLoading = false;
                    if (res.code == 20000) {
                        this.$Message.success({
                            content: "删除成功",
                            duration: 5
                        });
                        this.pageNum = 1;
                        this.loadData();
                    } else {
                        this.$Message.error({
                            content: res.message,
                            duration: 5
                        });
                    }
                });
            },
            //    确认导入进度框
            btnSure: function () {
                clearInterval(this.timer);
                this.msgInfo = {},
                    this.loadingInfo = false;
                this.loadMode = false;
            }

        },
        destroyed() {
            clearInterval(this.timer);
        },
    };
</script>

<style lang="less" scoped>
    .moneybox {
        font-szie: 16px;
        background: #f0faff;
        border: 1px solid #abdcff;
        border-radius: 4px;
        padding: 8px 48px 8px 8px;
        margin-bottom: 10px;
        span {
            padding-left: 10px;
        }
        em {
            color: red;
            font-style: normal;
        }
    }

    .info {
        width: 100px;
        height: 100px;
        margin: 0 auto;
    }

    .p-info {
        text-align: center;
        font-size: 14px;
        line-height: 40px;
    }

</style>
